<template>
    <view class="">
        <HeadShadow></HeadShadow>
        <view class="page" id="equipment-detail">
            <view class="page-head">
                <view class="banner">
                    <view class="base-top">
                        <view class="top">
                            <view class="name">
                                <image class="online" :src=" deviceInfo.status == 1 ?imgBaseUrlV2 + 'home_wifi2.png' : imgBaseUrlV2 + 'home_wifi_no.png'" mode=""></image>
                                {{deviceInfo.name}}
                            </view>
                        </view>
                        <view class="device-img">
                             <image class="imgs" :src="deviceInfo.cover" mode=""></image>
                        </view>
                    </view>
                </view>
                <view class="tab-box" style="overflow-x: scroll;">
                
                    <Tab :tabs="tabs" :current="currentTab" @change="onChangeTab"></Tab>
                </view>
            </view> 
            <view class="panel">
                <view v-for="(item,index) in tabs" :key="index">
                    <view v-if="item.id == 1000 && item.cache" v-show="currentTab == 1000">
                        <Base
                            ref="base"
                            @handlefollow="handlefollow"
                            :device_id="device_id || ''"
                            :deviceInfo="deviceInfo"
                            :radarData="radarData"
                          ></Base>
                    </view>
                    <view v-if="item.id !== 1000 && item.id !== 1001 && item.cache">
                        <view v-show="currentTab === item.id">
                    		<Oil
                    		    ref="oil"
                    		    :device_id="device_id || ''"
                    		    :type_id="item.id"
                    		  ></Oil>
                        </view>
                    </view>
                    <view v-if="item.id == 1001 && item.cache">
                        <view class="digital" v-show="currentTab == 1001">
                            <Digital :deviceInfo="deviceInfo"></Digital>
                        </view>
                    </view>
                    
                </view>
                
               
                
                <!-- <view v-if="tabs[1].cache" >
                    <view v-show="currentTab === 1">
						<Work
						    ref="work"
						    :device_id="device_id || ''"
						    :type_id="1"
						  ></Work>
                    </view>
                </view>

                <view v-if="tabs[tabs.length].cache">
                    <view class="digital" v-show="currentTab === tabs.length">
                        <Digital :deviceInfo="deviceInfo"></Digital>
                    </view>
                </view> -->
            </view>

         <!--   <cover-view class="cover-view" v-if="currentTab !== 3">
                <cover-view class="item">
                    <cover-view @click="onClickReport" class="btn btn-default">
                        下载报告
                    </cover-view>
                </cover-view>
                <cover-view class="item">
                    <cover-view class="btn btn-primary" @click="onClickMaintain">
                        立即维护
                    </cover-view>
                </cover-view>
            </cover-view> -->
            <Message ref="message"></Message>
        </view>
    </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import popupLoading from "@/components/public/loading/popup";
import xModal from "@/components/public/x-modal/x-modal";
import { mapState } from "vuex";
import Base from "./components/base";
import Work from "./components/work";
import Oil from "./components/oil";
import { debounce, getPageScene } from "@/utils";
import { delayFunc } from "@/common/util";
import Router from "@/common/js/router";
import { imgBaseUrlV1, imgBaseUrlV0, imgBaseUrlV2 } from "@/common/config";
import Tab from "@/components/public/tabs/tab";
import {
    // getDeviceThresholdDetail,
    getDeviceRadarData,
    FollowAdd,
    getOneDeviceInfo,
    fieldType,
} from "@/common/api/equipment";
import NoData from "@/components/public/noData/noData";
import Digital from './components/digital.vue'
export default {
    mixins: [detailModule],
    components: {
        xModal,
        Digital,
        popupLoading,
        Tab,
        Base,
        Work,
        Oil,
        NoData,
    },
    computed: {
        ...mapState("User", ["userInfo"]),
    },
    data() {
        return {
            device_id:"",//设备ID
            deviceInfo:{},
            hasRenderChart: false,
            isLoadingFinish: false,
            imgBaseUrlV1,
            imgBaseUrlV0,
            imgBaseUrlV2,
            radarData: null,
            GroupId: null, // 传感器id
            groupList:[], // 
            // groupName: '',
            tabs: [],
            currentTab: 1000,
            mixinViewOptions: {
                getURL: "/device/detail",
                isPage: false,
                isShowLoading: false,
                reachBottom: false,
                createdIsNeed: false,
                pullDown: false,
            },
        };
    },
    async onLoad(e) {
        this.device_id = e.device_id
        this.getOneDeviceInfo();
        this.$nextTick(async () => {
            this.open();
            this.initData();
            this.fieldType();
        });
    },
    methods: {
        getOneDeviceInfo(){
            return getOneDeviceInfo({
                device_id: this.device_id,
            }).then((res) => {
                this.deviceInfo = res.data;
            }).catch((err) => {});
        },
        fieldType(){
            return fieldType({
                device_id: this.device_id,
            }).then((res) => {
               // 确保 this.tabs 初始化为数组
               this.tabs = this.tabs || [];
               
               // 处理响应数据
               if (!res || !res.data || !res.data.length) {
                   console.warn('No data to process');
                   return;
               }
               
               const list = res.data.map((item) => {
                   return {
                       text: item.title,
                       cache: true,
                       id: item.id,
                   };
               });
               
               // 合并 tabs
               this.tabs = [...list, ...this.tabs];
               
               // 添加"概览"项到开头
               this.tabs.unshift({
                   text: "概览",
                   cache: true,
                   id: 1000,
               });
               
               // 在尾部添加"设备档案"项
               this.tabs.push({
                   text: "设备档案",
                   cache: true,
                   id: 1001,
               });
            }).catch((err) => {});
        },
        
        fetchComplete(err, data, res) {
            if (res.code !== this.$ERR_OK) return;
            this.dataInfo = data;
            this.groupList = data.Sensors
            uni.setNavigationBarTitle({
                title: "设备详情  ",
            });
            data.service_end_time = data.service_end_time
                ? this.$moment(data.service_end_time).format("YYYY-MM-DD")
                : "";
        },
        swiperChange(e){
            let idx = e.detail.current
            this.GroupId = this.groupList[idx].id
            // this.groupName = this.groupList[idx].name
        },
	
        onChangeTab(tab, index) {
            this.currentTab = index;
            console.log(this.currentTab,"asdasda")
            console.log(index,"asdasda1")
            console.log(tab.cache,"asdasdaaa12")
            console.log(this.tabs,"asdasdaaa123")
            if (!tab.cache) {
                tab.cache = true;
                this.tabs.splice(index, 1, tab);
            }
             console.log(this.tabs,"asdasdaaa124")
        },
        open() {
            this._time = +new Date();
            this.$refs.popup && this.$refs.popup.open();
        },
        async close() {
            let now = +new Date();
            let time = this._time;
            let t = now - time;
            if (t <= 1000 * 0.5) {
                await delayFunc(500 - t);
			}
            this.isLoadingFinish = true;
            this.$refs.popup && this.$refs.popup.close();
        },
        async initData() {
            await Promise.all([
                // this.getDataInfo(),
                // this.getDeviceRadarData(),
                // this.getDeviceThresholdDetail(),
            ]);
            this.close();
        },
        // getDeviceThresholdDetail() {
        //     return getDeviceThresholdDetail({
        //         device_id: this.dataForm.device_id,
        //     });
        // },
        getDeviceRadarData() {
            return getDeviceRadarData({
                device_id: this.device_id,
            }).then((res) => {
            if (res.code !== this.$ERR_OK) {
                return this.message.error(res.message || "获取数据失败");
            }
            this.radarData = res.data;
            this.$refs.base && this.$refs.base.initChart();
            }).catch((err) => {});
         },


        onClickMaintain() {
            Router.push({
                path: "/pageA/service/apply/index",
                query: {
                    device_id: this.dataInfo.id,
                },
            });
        },
        onClickReport() {
            Router.push({
                path: "/pageA/equipment-detail/file/index",
                query: {
                    device_id: this.dataInfo.id,
                },
            });
        },
    },
    onPullDownRefresh() {
        this.open();
        this.initData();
    },
    onPageScroll: debounce(async function (e) {
        if (this.hasRenderChart || !this.$refs.base) return;
        if (typeof this.$refs.base.pageScroll === "function") {  
        }
    }, 30),
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

page, .page {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.cover-view {
  position: fixed;
  z-index: 999;
  display: flex;
  width: 100%;
  min-height: 120rpx;
  left: 0;
  bottom: 0;
  background: #163256;
  box-shadow: 0px 0px 24rpx 0px rgba(0, 0, 0, 0.2);
  padding: 20rpx 10rpx 0;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 84rpx;

    .btn {
      display: block;
      width: 340rpx;
      margin: auto;
      height: 80rpx;
      line-height: 76rpx;

      &.btn-default {
        color: #3F7DFF;
		background: #163256;
        border: 1px solid #3F7DFF;
        // border-image: linear-gradient(180deg, rgba(115, 180, 255, 1), rgba(63, 125, 255, 1)) 1 1;
      }
    }
  }
}

.white {
  background-color: #fff;
}

.page-head {
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  padding: 1rpx 0 0;
}
.banner {
  .base-top {
	width:100%;
	padding: 0 20rpx 20rpx
	.top{
	  display:flex;
	  align-items: center;
	  justify-content:space-between;
	  .name{
	    position:relative;
	    color: color-white;
	    padding: 10rpx 50rpx 10rpx 62rpx;
		font-size: 22rpx;
		text-overflow: ellipsis;
		overflow hidden;
		white-space nowrap;
	    .bg {
		  position:absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		}
		.online {
		    width: 48rpx;
		    position:absolute;
		    top: 7%;
		    left: 0%;
			
		}
		.follow{
			height:50rpx;
			line-height:50rpx;
			color:#999999;
			border: 1rpx solid#666666;
			border-radius:4rpx;
			padding:0 15rpx;
			font-size:28rpx;
			}
		}
	}
	.device-img {
	    width:100%;
	    height: 400rpx;
		.swiper {
			width:100%;
			height:100%;
		}
        .imgs{
            width: 700rpx;
            height: 100%
        }
	}
  }
}
.card-box {
  height: 308rpx;
  // background: linear-gradient(134deg, #8792b6 0%, #687192 100%);
  background: linear-gradient(135deg, #96AED3 0%, #8095C0 100%);
  border-radius: 10rpx;
  margin: 30rpx 24rpx;
  color: #fff;

  > .head {
    display: flex;
    height: 72rpx;
    line-height: 72rpx;
    // background: #6b7495;
    background: #8BA2C9;
    border-radius: 10rpx 10rpx 0 0;
    align-items: center;
    padding: 0 40rpx;

    > .image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }

  > .body {
    display: flex;
    flex-direction: column;
    padding: 58rpx 40rpx;
    height: 236rpx;
    justify-content: space-between;

    > .title {
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      line-height: 52rpx;
      no-wrap();
    }

    > .ft {
      display: flex;

      > .item {
        flex: 1;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 36rpx;

        &:last-child {
          text-align: right;
        }

        .link {
          text-decoration: underline;
        }
      }
    }
  }
}

.panel {
  padding: 30rpx 0 130rpx;
}

.swiper {
  height: calc(100vh - var(--window-top) - 442rpx);

  .swiper-item {
    padding: 30rpx 0;
    overflow: auto;
  }
}

.digital {
  // background: #fff;
  padding-top: 0rpx;
}
</style>